<template>
    <view class="bg-content">
        <scroll-view scroll-x="true">
            <div class="table table-bordered" style="background-color: white; text-align: center; width: 1050px; overflow: auto;">
                <div class="tr">
                    <div class="td text-center bold" style="width: 200px;">模板名称</div>
                    <div class="td text-center bold" style="width: 100px;">广告模板详情</div>
                    <div class="td text-center bold" style="width: 200px;">开始时间</div>
                    <div class="td text-center bold" style="width: 200px;">结束时间</div>
                    <div class="td text-center bold" style="width: 100px;">状态</div>
                    <div class="td text-center bold" style="width: 150px;">是否关联店铺</div>
                    <div class="td text-center bold" style="width: 100px;">操作</div>
                </div>
                <div class="tr" v-for="(item, index) in tbStoreAdTemplateList" :key="item.id">
                    <div class="td" style="width: 200px;">{{item.name | toEmptyStr}}</div>
                    <div class="td" style="width: 100px;">
                        <div style="text-decoration: underline;"
                             @click="navigateTo('/pages/sub/sub2-store-platform/store-platform/store-platform-store-manage/store-platform-store-ad-template/store-platform-goods-detail-ad-template-detail/index', null, item)">
                            点击查看
                        </div>
                    </div>
                    <div class="td" style="width: 200px;">{{item.startTime | toEmptyStr}}</div>
                    <div class="td" style="width: 200px;">{{item.endTime | toEmptyStr}}</div>
                    <div class="td" style="width: 100px;">{{item.statusText | toEmptyStr}}</div>
                    <div class="td" style="width: 150px; text-align: center;">
                        <u-switch active-color="red" v-model="item.isAssociated" :key="index" @change="onAssociatedChange($event, item, index)"></u-switch>
                    </div>
                    <div class="td" style="width: 100px;">
                        <div style="margin-top: 5px; text-decoration: underline;"
                             @click="navigateTo('/pages/sub/sub2-store-platform/store-platform/store-platform-store-manage/store-platform-store-ad-template/store-platform-goods-detail-ad-template-edit/index', null, item)">
                            编辑
                        </div>
                        <div style="margin-top: 10px; margin-bottom: 10px; text-decoration: underline;" @click="deleteItem(item, index)">
                            删除
                        </div>
                    </div>
                </div>
            </div>
        </scroll-view>

        <div style="padding-top: 50px;" v-if="!tbStoreAdTemplateList.length">
            <u-empty text="数据为空" mode="data"></u-empty>
        </div>

        <div style="padding-bottom: 60px;"></div>

        <div class="custom-bottom-button">
            <label @click="navigateTo('/pages/sub/sub2-store-platform/store-platform/store-platform-store-manage/store-platform-store-ad-template/store-platform-goods-detail-ad-template-add/index')">
                添加店铺广告模板
            </label>
        </div>
    </view>
</template>

<script>

    import {CommonUtil} from "@/dev/core/utils/common.util";
    import {TbStoreAdTemplateService} from "@/dev/services/tb-store-ad-template.service";

    export default {
        data() {
            return {
                tbStoreAdTemplateList: [],
            }
        },
        onShow() {
            const _self = this;
            _self.findTbStoreAdTemplateList();
        },
        methods: {
            findTbStoreAdTemplateList() {
                const _self = this;
                new TbStoreAdTemplateService().findListCascade({
                    storeId: _self.globalVariable.userInfo.tbStore.id
                }).then(result => {
                    _self.tbStoreAdTemplateList = result;
                });
            },
            onAssociatedChange($event, item, index) {
                const _self = this;
                console.log($event, item, index);
                CommonUtil.alert({
                    title: '提示！',
                    content: item.isAssociated ? '确定关联该模板吗？' : '确认取消关联该模板吗？',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                            item.isAssociated = !item.isAssociated;
                        } else { // 点击确定
                            new TbStoreAdTemplateService().updateAssociatedStore(item).then(result => {
                                _self.tbStoreAdTemplateList.forEach(tbStoreAdTemplate => {
                                    if (tbStoreAdTemplate.id !== item.id) {
                                        tbStoreAdTemplate.isAssociated = false;
                                    }
                                });
                                _self.$forceUpdate();
                                CommonUtil.toast("操作成功");
                            });
                        }
                    }
                });
            },
            /**
             * @param item
             * @param index
             */
            deleteItem(item, index) {
                const _self = this;
                CommonUtil.alert({
                    title: '提示！',
                    content: '确定删除吗？',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            new TbStoreAdTemplateService().batchDeleteTbStoreAdTemplateByIds(item.id).then(result => {
                                _self.tbStoreAdTemplateList.splice(index, 1);
                                CommonUtil.toast("删除成功");
                            });
                        }
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
